<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-input type="input" autosize placeholder="请输入用户ID" v-model="fy.memberId"
					@keyup.enter.native="SearchData" style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-cascader :options="options" @change="handleChange"></el-cascader>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="AccountList" border>
				<el-table-column prop="id" label="id" />
				<el-table-column prop="memberId" label="用户ID" />
				<el-table-column prop="transferMoney" label="转账金额" />
				<el-table-column prop="serviceCharge" label="手续费" />
				<el-table-column label="收入/支出">
					<template slot-scope="scope">
						<span v-if="scope.row.transferType == 1">支出</span>
						<span v-else>收入</span>
					</template>
				</el-table-column>
				<el-table-column prop="surplusMoney" label="结余金额" />
				<el-table-column prop="transferTime" label="交易时间" />
				<el-table-column prop="remark" label="备注" />
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as AccountInfoApi from "@/api/Search";
	import {
		timestampToTime
	} from "@/utils/date";
	export default {
		data() {
			return {
				timestampToTime,
				fy: {
					size: 5,
					current: 1,
				},
				total: 0,
				AccountList: [],
				options: [{
						label: "全部",
						value: 0,
					},
					{
						label: "支出",
						value: 1,
					},
					{
						label: "收入",
						value: 2,
					},
				],
			};
		},
		methods: {
			SearchData() {
				AccountInfoApi.InsertTransAccountInfo(this.fy).then((res) => {
					this.total = res.data.total;
					this.AccountList = res.data.records;
					this.AccountList.forEach((item) => {
						item.transferTime = this.timestampToTime(item.transferTime);
					});
				});
			},
			handleChange(value) {
				this.fy.transferType = value[0];
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.el-pagination {
		margin-top: 10px;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 30%;
	}

	.el-input {
		width: 20%;
		margin-left: 20px;
	}

	.el-cascader {
		width: 20%;
		margin-left: 20px;
	}
</style>
